<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>我的社团</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
     <script type="text/javascript" src="../js/basic.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <style type="text/css"> 
    .show{
    	
    }
    .show img{
        width: 300px;
        height: 300px;
        float: left;
        margin: 25px 10px;
    }
    
    .show h5{
    	color:#FF5722;
    	font-size:30px;
    }
    .show p{
    	font-size:20px;
    }
    </style>
    </head>

<body  class="layui-container bs-center" >
<script>
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.9),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}();
</script>
    <table class="layui-table"" id="partyTable" lay-filter="partyTable"></table>
</body>

<div class="layui-tab layui-tab-brief  bs-hidden" id="partyDetail" lay-filter="partyDetail">
  <ul class="layui-tab-title">
    <li class="layui-this">社团信息</li>
    <li>成员信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <form action="" class="layui-form fm-in" lay-filter="partyCard" id="partyCard">
      	<fieldset class="layui-elem-field">
		  <legend> <label id="soc_name"></label> - <label id="soc_unit"> </label> </legend>
		  <div class="layui-field-box  show">
		    <img src="../img/触角动漫.jpg" id="soc_pic">
		    <h5>介绍</h5>
      		<p id="soc_intro">河南大学触角动漫社是我省起步最早，规模最大，发展最全面的动漫社之一，旨在为河南大学及开封的ACG爱好者创造一个交流互动的平台。
      		之所以名曰为触角（feeler），是希望大家能够以谦虚的态度，探索的精神去面对这片永远充满未知的广阔世界。
      		已经举办了Cosplay演出及舞台剧参赛、触角动漫DANCE大会(周年祭)、茶话会、绘画交流会、手办模型摄影等活动。
      		曾获得杭州中国动漫舞台剧大赛的全国第三名，今年更是挺进上海Chinajoy总决赛。</p>
		    
		  </div>
		</fieldset>
      </form>
    </div>
    <div class="layui-tab-item">
          <table class="layui-hide"  id="peopleInfo" lay-filter="peopleInfo"></table>
    </div>
  </div>
</div>
<span class="bs-hidden" id="StuNo"></span>
<script type="text/html" id="ipts">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="quit">退出</a>
</script>
<script>
layui.use(['table','layer','jquery','element','laydate','form'], function() {
   var table = layui.table;
   var layer = layui.layer;
   var $ = layui.jquery;
   var element = layui.element;
   var laydate = layui.laydate;
   var form = layui.form;
//监听提交
    form.on('submit(formDemo)', function(data){
        return false;
    });
//执行一个laydate实例
	laydate.render({
	  elem: '#act_start' //指定元素
	  ,format:"yyyy-MM-dd"
	});
	
//ajax对接后台
	$.ajax({
	  	type:"POST",
	  	url:"/user/getStuUser", //通过session获取当前Society
	  	dataType:"json",
	  	error:function(){
	  		console.log("error!");
	  	},
	  	success:function(data){
	  		console.log(data);
	  		$('#StuNo').html(data.stu_no);  
	  		console.log($('#StuNo').val())
	  		searchAll();
	  	}
	})
function searchAll(){  //查询当前学生的社团
	$.ajax({
		type:"GET",
		url:"/student/serchJoinedSociety",
		data:{"stu_no":$('#StuNo').text()},//写完登录后更改
		dataType:"json",
		error:function(){
			alert("error!");
		},
		success:function(data){
			console.log(data);
			//注入动态表格
			showTable(data);	
		}
	})  	  
}//searchAll();
//调用
searchAll();
//展示已知数据
function showTable(data){
	table.render({
       elem: '#partyTable',
       page: true,//开启分页
       cols: [[ //标题栏
           {
            field: 'soc_name',
            title: '社团名称',
            width: "15%",
            align:"center"  
           }, {
               field: 'soc_no',
               title: '社团号',
               width: "15%",
               align:"center"
               
           }, {
               field: 'soc_type',
               title: '社团类别',
               width: "10%",
               align:"center"
           }, {
               field: 'soc_unit',
               title: '挂靠单位',
               width: "15%",
               align:"center"
           }, {
               field: 'soc_man',
               title: '负责人',
               width: "10%",
               align:"center"
           }, {
               field: 'soc_tele',
               title: '联系电话',
               width: "15%",
               align:"center"
           }, {
               field: 'soc_count',
               title: '当前人数',
               width: "8%",
               align:"center"
           },{
               field: 'btn',
               title: '操作',
               width: "11.5%",
               align:"center",
               toolbar:"#ipts"
           }
           ]
       ],
		data:data,
       	even: true
   });           
}
//展示已加入的学生信息表格
function showPeopleTable(data){
 table.render({
    elem: '#peopleInfo',
    page: true,//开启分页
    cols: [
        [ //表头
          {
            field: 'stu_no',
            title: '学号',
            width: '20%',
            sort: true,
            align: 'center'
          }, {
            field: 'stu_name',
            title: '姓名',
            width: '20%',
            align: 'center'
          }, {
            field: 'stu_sex',
            title: '性别',
            width: '20%',
            align: 'center',
            sort: true
          }, {
            field: 'stu_age',
            title: '年龄',
            width: '20%',
            align: 'center'
          },  {
            field: 'stu_scho',
            title: '学院',
            width: '20%',
            align: 'center'
          }
        ]],
    data:data
  });
}//show people table
table.on('tool(partyTable)', function (obj) {
    var event = obj.event;
    var that = $(this);
    console.log(obj.data);
    if(event ==='detail'){
    //进行ajax操作查询成员
    $.ajax({
		type:"GET",
		url:"/manager/serchSocietyNumber",
		data:{"soc_no":obj.data.soc_no},//写完登录后更改
		dataType:"json",
		error:function(){
			alert("error!");
		},
		success:function(data){
			console.log(data);
			//注入动态表格
			showPeopleTable(data);	
		}
	}) 
	
	//替换详情页相关信息
	$("#soc_pic").attr("src",obj.data.soc_pic);
    $("#soc_name").html(obj.data.soc_name);
    $("#soc_unit").html(obj.data.soc_unit);
    $("#soc_name").html(obj.data.soc_name);
    $("#soc_intro").text(obj.data.soc_intro);
   	layer.open({
   		title:"社团详情",
   		type: 1,
   		closeBtn: 0,
   		content: $('#partyDetail'),
   		area:['100%','100%'],
   		btn:['返回'],
           btnAlign:'c',
           yes:function(index, layero){
           	layer.close(index);
               return false;
           },
    	});
    }
    else if(event === 'quit'){
        layer.open({
            type:1,
            closeBtn: 0,
            title:"提示信息",
            content:"<span style='font-size:20px; margin-left:40px'>"+"真的要退出么？"+"</span>",
            area:['200px','150px'],
            offset: '10px',
            btn:['确定','取消'],
            btnAlign:'c',
            yes:function(index, layero){
          	  $.ajax({
           		type:"POST",
           		data:{
           			"stu_no":$('#StuNo').text(),
           			"soc_no":obj.data.soc_no
           		},
           		url:"/student/exitSociety",
           		dataType:"json",
           		error:function(){
           			alert("error!");
           		},
           		success:function(data){
           			console.log(data);
           			if(data == true){
           				layer.msg('退出成功!',{
           					time:1000
           				},function(){
           					layer.closeAll();
           				});
           				searchAll();
           				return false;
           			}else if(data == false){
           				layer.msg('退出失败!',{
           					time:1000
           				},function(){
           					layer.closeAll();
           				});
           				searchAll();
           				return false;
           			}
           		}	
            	})
            },
            btn2:function(index, layero){
                layer.close(index);
                return false;
            }
          })
    }
    
    });

    });
</script>
</html>
